<template>
	<view class="container">
		<view class="icon-balance">
			<image src="../../static/balance/balance.png" mode="widthFix"></image>
		</view>
		<view class="bank">提现-建设银行(2656)</view>
		<view class="price">1200.00</view>
		<view class="liner"></view>
		<!-- 状态 -->
		<view class="state">
			<view class="left">当前状态</view>
			<view class="right">
				<view class="begin">
					<view class="cicle"></view>
					<view>发起提现</view>
					<view>2021-1-29 16:20:29</view>
				</view>
				<view class="handle">
					<view class="pending">
						<image src="../../static/balance/pending.png" mode="widthFix"></image>
					</view>
					<view>银行处理中</view>
					<view>预计2021-1-29 18:20:29前到账</view>
				</view>
				<view class="arrive">
					<view class="pending">
						<image src="../../static/balance/arrive.png" mode="widthFix"></image>
					</view>
					<view>到账</view>
					<view>到账时间2021-1-29 17:20:29</view>
				</view>
			</view>
		</view>
		<view class="liner"></view>
		<view class="detail-box">
			<view class="detail-item">
				<view class="left">提现金额</view>
				<view class="item-right">￥100.00</view>
			</view>
			<view class="detail-item">
				<view class="left">服务费</view>
				<view class="item-right">￥0.10</view>
			</view>
			<view class="detail-item">
				<view class="left">申请时间</view>
				<view class="item-right">2021-01-29 17:56:23</view>
			</view>
			<view class="detail-item">
				<view class="left">到账时间</view>
				<view class="item-right">2021-01-29 17:56:23</view>
			</view>
			<view class="detail-item">
				<view class="left">提现银行</view>
				<view class="item-right">中国建设银行</view>
			</view>
			<view class="detail-item">
				<view class="left">提现单号</view>
				<view class="item-right">56898959689598956859</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.container{
		padding: 60rpx 75rpx;
	}
	.icon-balance{
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto;
	}
	.icon-balance>image{
		width: 92rpx;
	}
	.bank{
		width: 290rpx;
		height: 42rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 42rpx;
		color: #333333;
		margin: 20rpx auto;
	}
	.price{
		width: 186rpx;
		height: 67rpx;
		font-size: 48rpx;
		font-weight: 800;
		line-height: 67rpx;
		color: #333333;
		margin: 25rpx auto;
	}
	.liner{
		border-bottom: 1px solid #D5D5D5;
		margin-top: 60rpx;
	}
	.state{
		display: flex;
		/* justify-content: space-between; */
		margin-top: 30rpx;
	}
	.left{
		width: 125rpx;
		color: #999999;
		font-size: 24rpx;
		font-weight: 300;
	}
	.right{
		position: relative;
	}
	.begin{
		border-left: 1px solid #00CB67;
		padding-left: 50rpx;
		padding-bottom: 50rpx;
	}
	.cicle{
		width: 17rpx;
		height: 17rpx;
		background: #00CB67;
		border-radius: 50%;
		position: absolute;
		left: -8rpx;
	}
	.handle{
		border-left: 1px solid #B2B2B2;
		padding-left: 50rpx;
		padding-bottom: 50rpx;
	}
	.pending{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		left: -25rpx;
		
	}
	.pending>image{
		width: 50rpx;
	}
	.arrive{
		padding-left: 50rpx;
	}
	.detail-box{
		padding-top: 30rpx;
	}
	.detail-item{
		display: flex;
		/* align-items: center; */
	}
	.item-right{
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin-bottom: 24rpx;
	}
</style>
